TypeScript Enum-alternativ: Konstanta påståenden kontra uniontyper

TypeScript's enum är en kraftfull funktion för att definiera en uppsättning namngivna konstanter. Det är dock inte alltid det bästa valet. Denna artikel utforskar alternativ till enums, specifikt konstanta påståenden och uniontyper, och ger vägledning om när man ska använda respektive för optimal kodkvalitet, underhållbarhet och prestanda. Vi kommer att fördjupa oss i nyanserna av varje tillvägagångssätt, erbjuda praktiska exempel och ta upp vanliga problem.

Förstå TypeScript Enums

Innan vi dyker in i alternativen, låt oss snabbt granska TypeScript enums. En enum är ett sätt att definiera en uppsättning namngivna numeriska konstanter. Som standard tilldelas det första enum-medlemmen värdet 0, och efterföljande medlemmar ökas med 1.

            
enum Status {
  Pending,
  InProgress,
  Completed,
  Rejected,
}

const currentStatus: Status = Status.InProgress; // currentStatus kommer att vara 1

            

              
                Copy
              
            
          

Du kan också explicit tilldela värden till enum-medlemmar:

            
enum HTTPStatus {
  OK = 200,
  BadRequest = 400,
  Unauthorized = 401,
  Forbidden = 403,
  NotFound = 404,
}

const serverResponse: HTTPStatus = HTTPStatus.OK; // serverResponse kommer att vara 200

            

              
                Copy
              
            
          

Fördelar med Enums

• Läslighet: Enums förbättrar kodens läslighet genom att tillhandahålla meningsfulla namn för numeriska konstanter.
• Typsäkerhet: De säkerställer typsäkerhet genom att begränsa värden till de definierade enum-medlemmarna.
• Autokomplettering: IDE:er tillhandahåller förslag för autokomplettering av enum-medlemmar, vilket minskar fel.

Nackdelar med Enums

• Runtime-overhead: Enums kompileras till JavaScript-objekt, vilket kan introducera runtime-overhead, särskilt i stora applikationer.
• Mutation: Enums är muterbara som standard. Även om TypeScript tillhandahåller const enum för att förhindra mutation, har det begränsningar.
• Omvänd mappning: Numeriska enums skapar en omvänd mappning (t.ex. Status[1] returnerar "InProgress"), vilket ofta är onödigt och kan öka bundle-storleken.

Alternativ 1: Konstanta påståenden

Konstanta påståenden ger ett sätt att skapa oföränderliga, skrivskyddade datastrukturer. De kan användas som ett alternativ till enums i många fall, särskilt när du behöver en enkel uppsättning sträng- eller numeriska konstanter.

            
const Status = {
  Pending: 'pending',
  InProgress: 'in_progress',
  Completed: 'completed',
  Rejected: 'rejected',
} as const;

// Typescript härleder följande typ:
// {
//    readonly Pending: "pending";
//    readonly InProgress: "in_progress";
//    readonly Completed: "completed";
//    readonly Rejected: "rejected";
// }

type StatusType = typeof Status[keyof typeof Status]; // 'pending' | 'in_progress' | 'completed' | 'rejected'

function processStatus(status: StatusType) {
  console.log(`Processing status: ${status}`);
}

processStatus(Status.InProgress); // Giltig
// processStatus('invalid'); // Fel: Argument av typen '"invalid"' kan inte tilldelas parameter av typen 'StatusType'.

            

              
                Copy
              
            
          

I det här exemplet definierar vi ett rent JavaScript-objekt med strängvärden. Påståendet as const säger till TypeScript att behandla detta objekt som skrivskyddat och härleda de mest specifika typerna för dess egenskaper. Vi extraherar sedan en uniontyp från nycklarna. Detta tillvägagångssätt erbjuder flera fördelar:

Fördelar med konstanta påståenden

• Oföränderlighet: Konstanta påståenden skapar oföränderliga datastrukturer, vilket förhindrar oavsiktliga ändringar.
• Ingen Runtime-overhead: De är enkla JavaScript-objekt, så det finns ingen runtime-overhead associerad med enums.
• Typsäkerhet: De tillhandahåller stark typsäkerhet genom att begränsa värden till de definierade konstanterna.
• Tree-shaking vänligt: Moderna bundlers kan enkelt tree-shake:a oanvända värden, vilket minskar bundle-storleken.

Överväganden för konstanta påståenden

• Mer verbose: Att definiera och typa kan vara något mer verbose än enums, särskilt för enkla fall.
• Ingen omvänd mappning: De tillhandahåller ingen omvänd mappning, men detta är ofta en fördel snarare än en nackdel.

Alternativ 2: Uniontyper

Uniontyper låter dig definiera en variabel som kan innehålla en av flera möjliga typer. De är ett mer direkt sätt att definiera de tillåtna värdena utan ett objekt, vilket är fördelaktigt när du inte behöver nyckel-värde-förhållandet som en enum eller ett konstant påstående.

            
type Status = 'pending' | 'in_progress' | 'completed' | 'rejected';

function processStatus(status: Status) {
  console.log(`Processing status: ${status}`);
}

processStatus('in_progress'); // Giltig
// processStatus('invalid'); // Fel: Argument av typen '"invalid"' kan inte tilldelas parameter av typen 'Status'.

            

              
                Copy
              
            
          

Detta är ett kortfattat och typsäkert sätt att definiera en uppsättning tillåtna värden.

Fördelar med Uniontyper

• Kortfattat: Uniontyper är det mest kortfattade tillvägagångssättet, särskilt för enkla uppsättningar av sträng- eller numeriska konstanter.
• Typsäkerhet: De tillhandahåller stark typsäkerhet genom att begränsa värden till de definierade alternativen.
• Ingen Runtime-overhead: Uniontyper existerar endast vid kompilering och har ingen runtime-representation.

Överväganden för Uniontyper

• Ingen nyckel-värde-association: De tillhandahåller ingen nyckel-värde-relation som enums eller konstanta påståenden. Detta innebär att du inte enkelt kan slå upp ett värde med dess namn.
• Upprepning av strängliteral: Du kan behöva upprepa strängliteraler om du använder samma uppsättning värden på flera ställen. Detta kan mildras med en delad type-definition.

När ska man använda vilken?

Den bästa metoden beror på dina specifika behov och prioriteringar. Här är en guide som hjälper dig att välja:

• Använd Enums När:
  • Du behöver en enkel uppsättning numeriska konstanter med implicit inkrementering.
  • Du behöver omvänd mappning (även om detta sällan är nödvändigt).
  • Du arbetar med äldre kod som redan använder enums i stor utsträckning och du har inget brådskande behov av att ändra den.
• Använd konstanta påståenden När:
  • Du behöver en uppsättning sträng- eller numeriska konstanter som ska vara oföränderliga.
  • Du behöver en nyckel-värde-relation och vill undvika runtime-overhead.
  • Tree-shaking och bundle-storlek är viktiga överväganden.
• Använd Uniontyper När:
  • Du behöver ett enkelt, kortfattat sätt att definiera en uppsättning tillåtna värden.
  • Du behöver ingen nyckel-värde-relation.
  • Prestanda och bundle-storlek är kritiska.

Exempelscenario: Definiera användarroller

Låt oss överväga ett scenario där du behöver definiera användarroller i en applikation. Du kan ha roller som "Admin", "Editor" och "Viewer".

Använda Enums:

            
enum UserRole {
  Admin,
  Editor,
  Viewer,
}

function authorize(role: UserRole) {
  // ...
}

            

              
                Copy
              
            
          

Använda konstanta påståenden:

            
const UserRole = {
  Admin: 'admin',
  Editor: 'editor',
  Viewer: 'viewer',
} as const;

type UserRoleType = typeof UserRole[keyof typeof UserRole];

function authorize(role: UserRoleType) {
  // ...
}

            

              
                Copy
              
            
          

Använda Uniontyper:

            
type UserRole = 'admin' | 'editor' | 'viewer';

function authorize(role: UserRole) {
  // ...
}

            

              
                Copy
              
            
          

I detta scenario erbjuder uniontyper den mest kortfattade och effektiva lösningen. Konstanta påståenden är ett bra alternativ om du föredrar en nyckel-värde-relation, kanske för att slå upp beskrivningar av varje roll. Enums rekommenderas i allmänhet inte här om du inte har ett specifikt behov av numeriska värden eller omvänd mappning.

Exempelscenario: Definiera API-slutpunktens statuskoder

Låt oss överväga ett scenario där du behöver definiera API-slutpunktens statuskoder. Du kan ha koder som 200 (OK), 400 (Bad Request), 401 (Unauthorized) och 500 (Internal Server Error).

Använda Enums:

            
enum StatusCode {
  OK = 200,
  BadRequest = 400,
  Unauthorized = 401,
  InternalServerError = 500
}

function processStatus(code: StatusCode) {
  // ...
}

            

              
                Copy
              
            
          

Använda konstanta påståenden:

            
const StatusCode = {
  OK: 200,
  BadRequest: 400,
  Unauthorized: 401,
  InternalServerError: 500
} as const;

type StatusCodeType = typeof StatusCode[keyof typeof StatusCode];

function processStatus(code: StatusCodeType) {
  // ...
}

            

              
                Copy
              
            
          

Använda Uniontyper:

            
type StatusCode = 200 | 400 | 401 | 500;

function processStatus(code: StatusCode) {
  // ...
}

            

              
                Copy
              
            
          

Återigen erbjuder uniontyper den mest kortfattade och effektiva lösningen. Konstanta påståenden är ett starkt alternativ och kan föredras då de ger en mer utförlig beskrivning för en given statuskod. Enums kan vara användbara om externa bibliotek eller API:er förväntar sig heltalsbaserade statuskoder, och du vill säkerställa sömlös integration. De numeriska värdena överensstämmer med standard HTTP-koder, vilket potentiellt förenklar interaktionen med befintliga system.

Prestandaöverväganden

I de flesta fall är prestandaskillnaden mellan enums, konstanta påståenden och uniontyper försumbar. Men i prestandakritiska applikationer är det viktigt att vara medveten om de potentiella skillnaderna.

• Enums: Enums introducerar runtime-overhead på grund av skapandet av JavaScript-objekt. Denna overhead kan vara betydande i stora applikationer med många enums.
• Konstanta påståenden: Konstanta påståenden har ingen runtime-overhead. De är enkla JavaScript-objekt som behandlas som skrivskyddade av TypeScript.
• Uniontyper: Uniontyper har ingen runtime-overhead. De existerar endast vid kompilering och raderas under kompileringen.

Om prestanda är ett stort problem är uniontyper i allmänhet det bästa valet. Konstanta påståenden är också ett bra alternativ, särskilt om du behöver en nyckel-värde-relation. Undvik att använda enums i prestandakritiska delar av din kod om du inte har en specifik anledning att göra det.

Globala implikationer och bästa praxis

När du arbetar med projekt med internationella team eller globala användare är det avgörande att överväga lokalisering och internationalisering. Här är några bästa metoder för att använda enums och deras alternativ i ett globalt sammanhang:

• Använd beskrivande namn: Välj enum-medlemsnamn (eller konstanta påstående-nycklar) som är tydliga och otvetydiga, även för icke-engelsktalande. Undvik slang eller jargong.
• Överväg lokalisering: Om du behöver visa enum-medlemsnamn för användare, överväg att använda ett lokaliseringsbibliotek för att tillhandahålla översättningar för olika språk. Till exempel, istället för att direkt visa Status.InProgress, kan du visa i18n.t('status.in_progress').
• Undvik kulturspecifika antaganden: Var medveten om kulturella skillnader när du definierar enum-värden. Till exempel kan datumformat, valutasymboler och måttenheter variera betydligt mellan kulturer. Om du behöver representera dessa värden, överväg att använda ett bibliotek som hanterar lokalisering och internationalisering.
• Dokumentera din kod: Tillhandahåll tydlig och koncis dokumentation för dina enums och deras alternativ, förklara deras syfte och användning. Detta kommer att hjälpa andra utvecklare att förstå din kod, oavsett deras bakgrund eller erfarenhet.

Exempel: Lokalisera användarroller

Låt oss återbesöka exemplet med användarroller och överväga hur man lokaliserar rollnamnen för olika språk.

            
// Använder konstanta påståenden med lokalisering
const UserRole = {
  Admin: 'admin',
  Editor: 'editor',
  Viewer: 'viewer',
} as const;

type UserRoleType = typeof UserRole[keyof typeof UserRole];

// Lokaliseringsfunktion (med hjälp av ett hypotetiskt i18n-bibliotek)
function getLocalizedRoleName(role: UserRoleType, locale: string): string {
  switch (role) {
    case UserRole.Admin:
      return i18n.t('user_role.admin', { locale });
    case UserRole.Editor:
      return i18n.t('user_role.editor', { locale });
    case UserRole.Viewer:
      return i18n.t('user_role.viewer', { locale });
    default:
      return 'Okänd roll';
  }
}

// Exempel på användning
const currentRole: UserRoleType = UserRole.Editor;
const localizedRoleName = getLocalizedRoleName(currentRole, 'fr-CA'); // Returnerar lokaliserat "Éditeur" för franskkana.
console.log(`Aktuell roll: ${localizedRoleName}`);

            

              
                Copy
              
            
          

I detta exempel använder vi en lokaliseringsfunktion för att hämta det översatta rollnamnet baserat på användarens språkinställning. Detta säkerställer att rollnamnen visas på användarens föredragna språk.

Slutsats

TypeScript enums är en användbar funktion, men de är inte alltid det bästa valet. Konstanta påståenden och uniontyper erbjuder livskraftiga alternativ som kan ge bättre prestanda, oföränderlighet och kodunderhåll. Genom att förstå fördelarna och nackdelarna med varje tillvägagångssätt kan du fatta välgrundade beslut om vilken du ska använda i dina projekt. Överväg de specifika behoven för din applikation, ditt teams preferenser och den långsiktiga underhållbarheten av din kod. Genom att noggrant väga dessa faktorer kan du välja den bästa metoden för att definiera konstanter i dina TypeScript-projekt, vilket leder till renare, effektivare och mer underhållbara kodbaser.